<template>
    <view class="container">
        <view class="address-list" v-if="addressList.length > 0">
            <view class="item" @tap="addressAddOrUpdate" :data-address-id="item.id" v-for="(item, index) in addressList" :key="index">
                <view class="l">
                    <view class="name">{{ item.name }}</view>
                    <view class="default" v-if="item.isDefault">默认</view>
                </view>

                <view class="c">
                    <view class="mobile">{{ item.tel }}</view>
                    <view class="address">{{ item.addressDetail }}</view>
                </view>

                <view class="r">
                    <van-icon @tap.native.stop.prevent="deleteAddress($event, { addressId: item.id })" :data-address-id="item.id" class="del" name="delete" />
                </view>
            </view>
        </view>
        <view class="empty-view" v-if="addressList.length <= 0">
            <text class="text">收货地址还没有~~~</text>
        </view>
        <view class="add-address" @tap="addressAddOrUpdate" data-address-id="0">新建</view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            addressList: [],
            total: 0
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
        this.getAddressList();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getAddressList() {
            let that = this;
            util.request(api.AddressList).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        addressList: res.data.list,
                        total: res.data.total
                    });
                }
            });
        },

        addressAddOrUpdate(event) {
            console.log(event);

            //返回之前，先取出上一页对象，并设置addressId
            var pages = getCurrentPages();
            var prevPage = pages[pages.length - 2];
            if (prevPage.route == 'pages/checkout/checkout') {
                try {
                    uni.setStorageSync('addressId', event.currentTarget.dataset.addressId);
                } catch (e) {
                    console.log('CatchClause', e);
                    console.log('CatchClause', e);
                }
                let addressId = event.currentTarget.dataset.addressId;
                if (addressId && addressId != 0) {
                    uni.navigateBack();
                } else {
                    uni.navigateTo({
                        url: '/pages/ucenter/addressAdd/addressAdd?id=' + addressId
                    });
                }
            } else {
                uni.navigateTo({
                    url: '/pages/ucenter/addressAdd/addressAdd?id=' + event.currentTarget.dataset.addressId
                });
            }
        },

        deleteAddress(event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            console.log(event.target);
            let that = this;
            uni.showModal({
                title: '',
                content: '确定要删除地址？',
                success: function (res) {
                    if (res.confirm) {
                        let addressId = event.target.dataset.addressId;
                        util.request(
                            api.AddressDelete,
                            {
                                id: addressId
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                that.getAddressList();
                                uni.removeStorage({
                                    key: 'addressId',
                                    success: function (res) {}
                                });
                            }
                        });
                        console.log('用户点击确定');
                    }
                }
            });
            return false;
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.container {
    height: 100%;
    width: 100%;
}

.address-list {
    padding-left: 31.25rpx;
    background: #fff;
    background-size: auto 10.5rpx;
    margin-bottom: 90rpx;
}

.address-list .item {
    height: 156.55rpx;
    align-items: center;
    display: flex;
    border-bottom: 1rpx solid #dcd9d9;
}

.address-list .l {
    width: 125rpx;
    height: 80rpx;
    overflow: hidden;
}

.address-list .name {
    width: 125rpx;
    height: 43rpx;
    font-size: 29rpx;
    color: #333;
    margin-bottom: 5.2rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.address-list .default {
    width: 62.5rpx;
    height: 33rpx;
    line-height: 28rpx;
    text-align: center;
    font-size: 20rpx;
    color: #b4282d;
    border: 1rpx solid #b4282d;
    visibility: visible;
}

.address-list .c {
    flex: 1;
    height: auto;
    overflow: hidden;
}

.address-list .mobile {
    height: 29rpx;
    font-size: 29rpx;
    line-height: 29rpx;
    overflow: hidden;
    color: #333;
    margin-bottom: 6.25rpx;
}

.address-list .address {
    height: 37rpx;
    font-size: 25rpx;
    line-height: 37rpx;
    overflow: hidden;
    color: #666;
}

.address-list .r {
    width: 52rpx;
    height: auto;
    overflow: hidden;
    margin-right: 16.5rpx;
}

.address-list .del {
    display: block;
    width: 52rpx;
    height: 52rpx;
}

.add-address {
    border: none;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90rpx;
    line-height: 98rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-left: 5%;
    text-align: center;
    /* padding-left: -5rpx; */
    font-size: 25rpx;
    color: #f4f4f4;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    letter-spacing: 3rpx;
    background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
}

.empty-view {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-view .text {
    width: auto;
    font-size: 28rpx;
    line-height: 35rpx;
    color: #999;
}
</style>
